<template>
	<view style="padding-top: 98rpx;">
		<view class="nav">
			<view class="flex_between">
				<view class="nav_title"><view :class="{ activeT: isActive == 0 }" class="nav-item" @click="chenked(0)">招募留言</view></view>
				<view class="nav_title"><view :class="{ activeT: isActive == 1 }" class="nav-item" @click="chenked(1)">系统留言</view></view>
			</view>
		</view>
		<view v-if="isActive == 0">
			<view v-for="(item, index) in list" :key="index" class="list" @click="detail(item)">
				<text>{{ item }}</text>
				<view class="arrow"></view>
			</view>
			<mix-load-more :status="loading"></mix-load-more>
		</view>
		<view v-if="isActive == 1" style="background:#fff;min-height: calc(100vh - 98rpx);">
			<view class="msg-list" id="msg">
				<mix-load-more :status="loading1"></mix-load-more>
				<view v-for="(item, index) in message" :key="index" class="listMessage" :class="item.userType === 1 ? 'user' : 'system'">
					<view class="data">{{ item.createTime }}</view>
					<view class="list_item">
						<view class="list_content">{{ item.message }}</view>
						<image :src="item.userType === 1 ? item.avatar : server" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="send">
				<textarea v-model="msg" id="textarea" auto-height="true" placeholder="输入留言"></textarea>
				<view class="btn" @click="send()">发送</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import http from '@/common/request.js';
import { getCommonShareInfo } from '@/common/utils.js';
import mixLoadMore from '@/components/mix-load-more/mix-load-more';
export default {
	onShareAppMessage() {
		return getCommonShareInfo();
	},
	data() {
		return {
			list: [],
			loading: 0,
			loading1: 0,
			pageNum: 1,
			pageSize: 20,
			pageNumMsg: 1,
			pageSizeMsg: 20,
			isActive: 0,
			message: [],
			msg: '',
			flag: true,
			allowRequest: true,
			server: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/service.png'
		};
	},
	components: {
		mixLoadMore
	},
	computed: {
		...mapState({ userInfo: state => state.userInfo })
	},
	onLoad(option) {
		this.isActive = option.isActive || '0';
		if (option) {
			this.chenked(this.isActive);
		}
	},
	mounted() {
		this.chatList();
		this.systemMessage = uni
			.createSelectorQuery()
			.in(this)
			.select('#msg')
			.boundingClientRect(data => {
				uni.pageScrollTo({
					scrollTop: data.height,
					duration: 200
				});
			});
	},
	onReachBottom() {
		if(this.isActive == '0' && this.loading != 2) {
			this.chatList();
		}
	},
	onPageScroll(res) {
		if (this.isActive == '1' && this.loading1 != 2 && res.scrollTop < 50) {
			this.messageList();
		}
	},
	methods: {
		chenked(e) {
			this.isActive = e;
			if (this.isActive == '1') {
				this.messageList();
			}
		},
		messageList() {
			if (this.allowRequest) {
				this.allowRequest = false;
			} else {
				return;
			}
			this.loading1 = 1;
			const customerOrStaffId = '1';
			http('/api/cusUserLeaveMessageDetail/pageList', { data: { pageNum: this.pageNumMsg, pageSize: this.pageSizeMsg }, method: 'POST' }).then(
				result => {
					let data = result.rows || [];
					this.message = [...data, ...this.message];
					if (this.pageNumMsg == 1) {
						this.scrollBottom();
					}
					if (data.length === this.pageSizeMsg) {
						this.pageNumMsg++;
						setTimeout(r => {
							this.allowRequest = true;
						}, 200);
						this.loading1 = 0;
					} else {
						this.loading1 = 4;
					}
					this.loading1 = this.list.length === 0 ? 4 : this.loading1;
				},
				result => {
					this.loading1 = 0;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		},
		send() {
			const msg = this.msg.replace(/s*/g, '');
			this.msg = '';
			if (msg) {
				this.message.push({
					createTime: this.getDate(new Date()),
					message: msg,
					avatar: this.userInfo.avatar,
					userType: 1
				});
				this.scrollBottom();
				http('/api/cusUserLeaveMessageDetail/leaveMessage', { data: { message: msg }, method: 'POST' }).then(result => {
					if (result.code == 200) {
					}
				});
			}
		},
		scrollBottom() {
			setTimeout(() => {
				this.systemMessage.exec();
			}, 0);
		},
		chatList() {
			this.loading = 1;
			const customerOrStaffId = this.userInfo.userId;
			http('/api/cusUserInfo/getCusLeavingMessageInfoDate', {
				data: { customerOrStaffId: customerOrStaffId, pageSize: this.pageSize, pageNum: this.pageNum },
				method: 'GET'
			}).then(
				result => {
					let data = result.data.times || [];
					this.list = this.list.concat(data); //进行数据的累加
					if (data.length == this.pageSize) {
						this.pageNum++; //页数的++
						this.loading = 0;
					} else {
						this.loading = 2;
					}
					this.loading = this.list.length === 0 ? 3 : this.loading;
				},
				result => {
					this.loading = 0;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		},
		detail(time) {
			uni.navigateTo({
				url: '/personal/messageDetail?time=' + time,
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		getDate(date) {
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			let h = date.getHours();
			h = h < 10 ? '0' + h : h; //小时补0
			let m = date.getMinutes();
			m = m < 10 ? '0' + m : m; //分钟补0
			let s = date.getSeconds();
			s = s < 10 ? '0' + s : s; //秒补0

			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day} ${h}:${m}:${s}`;
		}
	}
};
</script>

<style lang="less" scoped>
.nav {
	position: fixed;
	width: 100%;
	z-index: 10;
	background: #fff;
	top: 0;
	.flex_between {
		display: flex;
		justify-content: space-around;
		// justify-content: center;
		.nav_title {
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(138, 140, 141, 1);
			line-height: 37rpx;
			padding: 24rpx 28rpx;
			position: relative;
			.activeT {
				color: rgba(102, 100, 93, 1);
			}
			.activeT::after {
				content: '';
				position: absolute;
				top: 68rpx;
				right: 56rpx;
				width: 40rpx;
				height: 6rpx;
				border-radius: 5rpx;
				background-color: rgba(102, 100, 93, 1);
			}
			// &:last-child {
			// 	&::after {
			// 		width: 0;
			// 		display: none;
			// 	}
			// }
		}
	}
}
.list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 30rpx;
	color: #66645d;
	height: 89rpx;
	line-height: 89rpx;
	border-bottom: 1px solid rgba(102, 100, 93, 0.1);
	background: #fff;
	padding: 0 28rpx;
	.arrow {
		position: relative;
		width: 12rpx;
		height: 24rpx;
		transition: all 0.2s;
		background: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/sign-arrow.png) no-repeat;
		background-size: 12rpx 24rpx;
		&.down {
			transform: rotate(90deg);
		}
	}
}
.listMessage {
	font-size: 28rpx;
	.data {
		display: flex;
		font-size: 24rpx;
		justify-content: center;
		padding: 32rpx 0 23rpx 0;
		color: rgba(102, 100, 93, 0.5);
	}
	.list_item {
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;
		margin: 0 28rpx;
		image {
			width: 70rpx;
			height: 70rpx;
			flex-shrink: 0;
			border-radius: 50%;
		}
		.list_content {
			background-color: #f39800;
			color: #fff;
			padding: 15rpx 20rpx;
			min-height: 70rpx;
			line-height: 40rpx;
			margin: 0 12rpx;
			border-radius: 12rpx;
			max-width: 75%;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				border: solid 6rpx #f39800;
				transform: rotate(45deg);
				right: -4rpx;
				top: 30rpx;
			}
		}
	}
	&.system {
		background-color: #fff;
		.list_item {
			flex-direction: row-reverse;
			.list_content {
				background-color: #fff;
				color: #66645d;
				&::after {
					display: none;
				}
			}
		}
	}
}
.send {
	display: flex;
	background: #f7f7f7;
	align-items: center;
	box-shadow: 0 -3rpx 8rpx 0 rgba(0, 0, 0, 0.08);
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding-top: 14rpx;
	padding-left: 40rpx;
	padding-right: 40rpx;
	padding-bottom: 14rpx;
	padding-bottom: calc(14rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(14rpx + env(safe-area-inset-bottom));
	#textarea {
		background: #fff;
		line-height: 40rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #8a8c8d;
		flex: 1;
		padding: 15rpx 24rpx;
		display: inline-block;
		resize: none;
		// #ifdef H5
		min-height: 72rpx;
		// #endif
	}
	.btn {
		margin-left: 36rpx;
		font-size: 30rpx;
		color: #66645d;
	}
}
.msg-list {
	padding-bottom: 140rpx;
	padding-bottom: calc(140rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
}
</style>
